<template>
  <Drawer :title="title">
    <Transfer
      class="w-full"
      :showSelectAll="false"
      :data-source="allList"
      :targetKeys="hasIds"
      :one-way="true"
      :titles="titles"
      :render="(item) => item.storeName"
      :list-style="{
        width: '50%',
        height: '70vh',
      }"
      @change="handleChange"
      showSearch
    />
  </Drawer>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'AllocateDrawer',
});
import { computed, ref, watch } from 'vue';
import { Transfer, message } from 'ant-design-vue';
import { useVbenDrawer } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { bbsList, busList, busSave } from '../data/api';
import { drawerFormSchema, handleId, idKey } from '../data/options';
import { useThrottleFn } from '@vueuse/core';

const title = computed(() => {
  return `分配微馆管理员`;
});
const emit = defineEmits(['success']);
const titles = ref(['可分配微馆', '已分配微馆']);
const hasIds = ref<any>([]);
const allList = ref<any>([]);

const getData = async () => {
  const bbsListRes: any = await bbsList({});
  const busListRes: any = await busList({ userId: handleId.value });
  console.log('bbsListRes', bbsListRes.data);
  bbsListRes.data.forEach((item: any) => {
    item.key = item.storeId;
  });
  allList.value = bbsListRes.data;
  hasIds.value = busListRes.data.map((item: any) => {
    return item.storeId;
  });
  console.log('allList', allList.value);
  console.log('hasIds', hasIds.value);
};

const handleChange = (nextTargetKeys: string[]) => {
  hasIds.value = nextTargetKeys;
};

// 设置用户角色
const setRoleQuery = async () => {
  let res: any = await busSave({
    userId: handleId.value,
    roleIds: hasIds.value.toString(),
  });
  console.log(res);
  onSucClose();
};

// 抽屉配置
const [Drawer, drawerApi] = useVbenDrawer({
  class: 'w-2/5',
  onCancel() {
    drawerApi.close();
  },
  onConfirm: () => setRoleQuery(),
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      getData();
    }
  },
});

const onSucClose = () => {
  drawerApi.close();
  emit('success');
};
</script>

<style lang="scss" scoped></style>
